<template>
	<view class="container">
    <!-- 主要内容区域 -->
		<view class="content">
			<!-- 订单状态 -->
			<view class="order-status">
				<u-icon name="order" color="#8A2BE2" size="40" />
				<text class="status-text">等待付款</text>
			</view>
			
			<!-- 收货地址 -->
			<view class="addressCard">
				<addressCard ref="addressCard" disabled />
			</view>
			
			<view class="proBox">
				<view class="order-number">订单编号：88533498</view>
				<view class="product-list">
					<productCardOrderDetail
					    v-for="(proItem,index) in orderData.proList"
					    :key="index"
					    :proItem="proItem"
					/>
				</view>
			</view>
			
			<view class="infoBox">
				<view class="item">
					<text class="left">
						订单编号：
					</text>
					<text class="right c6">
						123445
					</text>
				</view>
				<view class="item">
					<text class="left">
						下单时间：
					</text>
					<text class="right c6">
						2024-10-10 12:00:00
					</text>
				</view>
				<view class="divider" />
				<view class="item">
					<text class="left">
						商品总额
					</text>
					<text class="right c3">
						￥111.00
					</text>
				</view>
				<view class="item">
					<text class="left">
						运费：
					</text>
					<text class="right c3">
						￥10
					</text>
				</view>
				<view class="item">
					<text class="left">
						优惠：
					</text>
					<text class="right c3">
						-￥10
					</text>
				</view>
				<view class="yfBox">
					<text class="yf">应付：</text>
					<text class="unit">¥</text>
					<text class="money">209</text>
				</view>
			</view>
		</view>
      
      <!-- 订单商品 -->

    <!-- 底部按钮 -->
    <view class="btmBox">
		<view class="toPay">去支付</view>
		<u-safe-bottom></u-safe-bottom>
    </view>
  </view>
</template>

<script>
	import { addressCard } from "@/components/addressCard.vue"
	import { productCardOrderDetail } from "@/components/productCardOrderDetail.vue"
	export default {
		name: 'OrderDetail',
		components: {
			addressCard,
			productCardOrderDetail
		},
		data() {
			return {
				orderData: {
                    id: 3,
                    code: 1234567,
                    status: 4,
                    time: '2023-01-01 12:00:00',
                    totalPay: 1999,
                    proList: [{
                        id: 11111,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 1
                    }, {
                        id: 11112,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 2
                    }, {
                        id: 11113,
                        img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                        name: '洋酒 预调 鸡尾酒 果酒 微醺小美好',
                        price: 209.00,
                        num: 3
                    }]
                }
			}
		},
		onLoad(option) {
			this.$refs.addressCard.address = 111
            // this.$http(`/api/product/detail/${JSON.parse(option.productData).id}`)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: $uni-bg-color-grey;
		display: flex;
		flex-direction: column;
		.content {
			padding: 30rpx 30rpx 0;
			flex: 1;
			overflow-y: auto;
			.order-status {
				margin-bottom: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.addressCard {
				margin-bottom: 30rpx;
				background-color: $uni-bg-color;
				padding: 0 20rpx;
				border-radius: $uni-border-radius-lg;
			}
			
			.proBox {
				margin-bottom: 30rpx;
				padding: 20rpx;
				background-color: $uni-bg-color;
				border-radius: $uni-border-radius-llg;
				.order-number {
					padding: 20rpx 0;
					font-size: 30rpx;
					color: $uni-text-color-grey-6;
				}
			}
			
			.infoBox {
				margin-bottom: 30rpx;
				padding: 20rpx;
				background-color: $uni-bg-color;
				.item {
				    display: flex;
				    justify-content: space-between;
				    align-items: center;
				    line-height: 76rpx;
				    .left {
				        font-size: 30rpx;
				        color: $uni-text-color-grey-3;
				    }
				    .right {
				        font-size: 30rpx;
				        color: $uni-text-color;
				    }
					.c3 {
						color: $uni-text-color-grey-3;
						font-weight: bold;
					}
					.c6 {
						color: $uni-text-color-grey-6;
					}
				    .red {
				        color: $uni-text-color-money;
				    }
				}
				.divider {
				    margin: 30rpx 0;
				    border-top: 1px solid $uni-border-color-btm;
				    position: relative;
				}
				.yfBox {
				    text-align: right;
				    line-height: 48rpx;
				    .yf {
				        font-size: 30rpx;
				        color: #666666;
				    }
				    .unit {
				        font-family: DIN Alternate, DIN Alternate;
				        font-weight: bold;
				        font-size: 24rpx;
				        color: $uni-text-color-money;
				    }
				    .money {
				        font-family: DIN Alternate, DIN Alternate;
				        font-weight: bold;
				        font-size: 36rpx;
				        color: $uni-text-color-money;
				    }
				}
			}
		}
		
		.btmBox {
			padding: 10rpx 30rpx;
			background-color: $uni-bg-color;
			display: flex;
			align-items: flex-end;
			flex-direction: column;
			.toPay {
				width: 240rpx;
				height: 80rpx;
				background: $uni-bg-color-btn;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				color: $uni-text-color-inverse;
			}
		}
	}

.address-card, .product-card, .order-info-card {
  margin-top: 20rpx;
}

.address-text {
  font-size: 30rpx;
  font-weight: bold;
}

.contact-text {
  font-size: 24rpx;
  color: #999999;
}

.product-image {
  width: 100rpx;
  height: 100rpx;
}

.product-name {
  font-size: 28rpx;
}

.price {
  color: #FF0000;
  font-weight: bold;
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
</style>